<template>
  <view class="container">
    <view class="container_layout">
      <z-paging ref="paging" refresher-only @onRefresh="onRefresh">
        <view
          v-for="(item, index) in completeList"
          :key="item.id"
          class="imgLayout"
          @longpress="longPress(item)"
          @click="preview(index)"
        >
          <image :src="item.full_path" mode="aspectFill" class="imgItem" />
        </view>
      </z-paging>
    </view>

    <u-action-sheet
      :actions="actionList"
      :show="showAction"
      :closeOnClickOverlay="true"
      @select="select"
      @close="showAction = false"
    ></u-action-sheet>
  </view>
</template>

<script>
import { savePhotoAlbum, previewImgFn } from "@/common";
export default {
  data() {
    return {
      completeList: [
        {
          full_path:
            "https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202402/autodl-container-a10f4387ee-ecc11069-1709098555-ComfyUI_00019_.png",
          id: 1,
        },
        {
          full_path:
            "https://ly-sys-image.oss-cn-beijing.aliyuncs.com/img/uploads/api/202402/autodl-container-73da47ac76-da2d19f8-1709097847-ComfyUI_00014_.png",
          id: 2,
        },
      ],
      showAction: false, // 操作菜单
      actionList: [
        {
          name: "保存",
          subname: "一键保存到手机相册!",
          color: "#ffaa7f",
          fontSize: "18",
        },
        {
          name: "关闭",
        },
      ],
      preImg: "", // 准备保存到本地的图片路径
    };
  },
  onLoad() {},
  onShow() {},
  methods: {
    onRefresh() {
      setTimeout(() => {
        // 1秒之后停止刷新动画
        this.$refs.paging.complete();
      }, 1000);
    },
    // 长按事件
    longPress(item) {
      console.log("长按事件");
      this.preImg = item.full_path;
      this.showAction = true;
      // this.saveImgFn(item)
    },

    // 点击列表
    select(option) {
      if (option.name === "保存") {
        this.saveFileFn();
      } else {
        this.showAction = false;
      }
    },

    // 保存到本地
    saveFileFn() {
      this.showAction = false;
      console.log(this.preImg);
      savePhotoAlbum(this.preImg);
    },

    // 点击事件
    preview(ind) {
      const previewList = this.completeList.map((item) => {
        return item.full_path;
      });
      previewImgFn(previewList, ind);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  display: flex;
  justify-content: center;
}

.container_layout {
  .workingLayout {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 8px;

    .workingItem {
      padding: 8px;
      width: 144px;
      height: 208px;
      border: 1px solid #ccc;
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #f1f1f1;
      margin-bottom: 10px;
    }
  }

  .imgLayout {
    width: 160px;
    padding: 8px;

    .imgItem {
      width: 160px;
      border-radius: 8px;
    }

    &:hover {
      box-shadow: 2px 2px 4px 4px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
    }
  }
}

/* 
/deep/ 是less的深度选择器  scss用 ::v-deep
*/
::v-deep .zp-paging-container {
  padding: 16px;
}

::v-deep .zp-paging-container-content {
  display: flex;
  justify-content: space-between;
}
</style>
